<template>
  <div v-if="displayColumns.length" class="card table-search">
    <el-form ref="formRef" :model="searchParam" @submit.prevent>
      <Grid ref="gridRef" :collapsed="collapsed" :gap="[10, 0]" :cols="searchCol">
        <GridItem v-for="(item, index) in displayColumns" :key="index" v-bind="getResponsive(item)" :index="index">
          <el-form-item class="search-label">
            <template #label v-if="`${item.search?.label ?? item.label}`">
              <el-space :size="5">
                <span class="label">{{ _transitionLanguages("table", `${item.search?.label ?? item.label}`) }} :</span>
                <el-tooltip v-if="item.search?.tooltip" effect="dark" :content="item.search?.tooltip" placement="top">
                  <i :class="'iconfont icon-yiwen'"></i>
                </el-tooltip>
              </el-space>
            </template>
            <SearchFormItem :column="item" :search-param="searchParam" />
          </el-form-item>
        </GridItem>
        <GridItem suffix>
          <div class="operation">
            <el-button type="primary" :icon="Search" @click="search"> {{ _transitionLanguages("basic", "search") }} </el-button>
            <el-button :icon="RefreshLeft" @click="reset"> {{ _transitionLanguages("basic", "reset") }} </el-button>
            <el-button v-if="showCollapse" type="primary" link class="search-isOpen" @click="collapsed = !collapsed">
              {{ collapsed ? _transitionLanguages("button", "unfold") : _transitionLanguages("button", "close") }}
              <el-icon class="el-icon--right">
                <component :is="collapsed ? ArrowDown : ArrowUp"></component>
              </el-icon>
            </el-button>
          </div>
        </GridItem>
      </Grid>
    </el-form>
  </div>
</template>
<script setup lang="ts" name="SearchForm">
import { computed, ref } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { BreakPoint } from "@/components/Grid/interface";
import { RefreshLeft, Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue";
import SearchFormItem from "./components/SearchFormItem.vue";
import Grid from "@/components/Grid/index.vue";
import GridItem from "@/components/Grid/components/GridItem.vue";

interface ProTableProps {
  columns?: ColumnProps[]; // 搜索配置列
  searchParam?: { [key: string]: any }; // 搜索参数
  searchCol?: number | Record<BreakPoint, number>;
  search: (params: any) => void; // 搜索方法
  reset: (params: any) => void; // 重置方法
}
// 默认值
const props = withDefaults(defineProps<ProTableProps>(), {
  columns: () => [],
  searchParam: () => ({}),
  searchCol: () => ({ xs: 1, sm: 2, md: 3, lg: 4, xl: 4 })
});

const displayColumns = computed(() => props.columns.filter(col => !col.search?.hide));

// 获取响应式设置
const getResponsive = (item: ColumnProps) => {
  return {
    span: item.search?.span,
    offset: item.search?.offset ?? 0,
    xs: item.search?.xs,
    sm: item.search?.sm,
    md: item.search?.md,
    lg: item.search?.lg,
    xl: item.search?.xl
  };
};

// 是否默认折叠搜索项
const collapsed = ref(true);

// 获取响应式断点
const gridRef = ref();
const breakPoint = computed<BreakPoint>(() => gridRef.value?.breakPoint);

// 语言转换
const _transitionLanguages = (v: string, l: string): string => {
  return transitionLanguages(v, l);
};

// 判断是否显示 展开/合并 按钮
const showCollapse = computed(() => {
  let show = false;

  displayColumns.value.reduce((prev, current) => {
    prev +=
      (current.search![breakPoint.value]?.span ?? current.search?.span ?? 1) +
      (current.search![breakPoint.value]?.offset ?? current.search?.offset ?? 0);
    if (typeof props.searchCol !== "number") {
      if (prev >= props.searchCol[breakPoint.value]) show = true;
    } else {
      if (prev >= props.searchCol) show = true;
    }
    return prev;
  }, 0);
  return show;
});
</script>

<style lang="scss" scoped>
.search-label {
  :deep(.el-form-item__label) {
    padding-right: 2px !important;
  }
  .label {
    width: 80px;
    text-align: right;
  }
}
</style>
